<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="list.push('蜡笔小新')">添加一个项</button>
        <button @click="list.pop()">删除一个项</button>
        <!-- 利用索引值改变数组时,不能被侦听到。 -->
        <button @click="list[0] ='病猫’">修改第一项</button>
        <button @click="list.splice(1,0,'天气之子')">第二项添加</button>
        <ul>
            <li v-for="item in list">
                {{ item }}
            </li>
        </ul>
    </div>
        <script src="../../vue.js"></script>

        <script>
            new Vue({
                el:'#app', 
                data:{
                    list:['龙猫','名侦探柯南 ','千与千寻','你的名字']
                },
            watch:{
                list(){
                    console.log('数组改变了');
                }
            }
        })
        //在数组中使用侦听器总结:
        // 1.彻底替换为一个新数组,那么可以被侦听到。
        // 2.如果使用了push()等标准的数组操作方法,那么可以被侦听到。
        // 3.如果直接修改数组的元素,那么无法被侦听到。
        // (解决方法:使用$set(()方法修改元素的值。Vue3语法。)      
        //	不要使用length属性来修改数组长度,而改用其他标准方法显示数组长度的变化。
        </script>
        
</body>
</html>